#main {
  input {
    height: auto;
  }
  height: 100vh;
  width: 100vw;
  min-height: 500px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  overflow: hidden;
}

.pub_foot {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  min-height: 2rem;
  max-height: 2rem;
  line-height: 2rem;
  background: linear-gradient(to right, #ff5100, #ff8e00);
}

.pub_foot_sub {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  min-height: 2rem;
  max-height: 2rem;
  background: #E4ECF4;
  text-align: center;
  .button_two {
    width: 40%;
    text-align: center;
  }
}

.pub_main {
  position: absolute;
  left: 0;
  top: 2rem;;
  width: 100%;
  .succese_div {
    width: 100%;
    height: 60%;
    position: fixed;
    top: 20%;
    text-align: center;

    .p_strong {
      font-size: large;
      font-weight: bold;
      color: black;
    }
    .p_small {
      font-size: x-small;
      font-weight: bold;
      color: #8f8f94;
    }
    .p_orange {
      font-size: large;
      font-weight: bold;
      color: darkorange;
    }
    p {
      margin-top: 2rem;
    }

  }
  .main_center {
    width: 100%;
    background: white;
    height: 12rem;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    span {
      position: relative;
      top: 5rem;
      color: #524848;
    }

    img {
      max-width: 100%;
      max-height: 100%;
    }
  }

  .textarea_body {
    width: 100%;
    height: 12rem;
    background: #f7f7fc;
    text-align: center;
    .textarea {
      font-size: 14px;
      font-weight: bold;
      letter-spacing: 1px;
      text-align: center;
    }
    .textarea_big {
      width: 90%;
      height: 95%;
      border: none;
      margin-top: 5%;
      border-radius: 5px;
    }
    span {
      font-size: smaller;
      font-weight: bold;
      position: relative;
      top: -1rem;
      color: #6d6d72;
    }
    .warn {
      margin-top: 2rem;
      text-align: center;
      color: #ff5306;
      font-size: small;
      font-weight: bold;
    }
  }

  .introduce {

    width: 100%;
    .icon {
      font-size: 13px;
    }
    .bigcell {
      min-height: 3.5rem;
      max-height: 3.5rem;
      border-bottom: 1px solid lightgray;
      background: white;
      font-family: "Microsoft YaHei";
      text-align: left;
      .smallSpan {
        text-align: left;
        font-size: 14px;
        letter-spacing: 1px;
        margin-top: 5px;
        color: #6d6d72;
      }
      .bigSpan {
        text-align: left;
        letter-spacing: 1px;
        font-size: smaller;
        font-weight: 500;

      }
      .rightSpan {
        float: right;
        font-size: xx-small;
        position: relative;
        top: 10px;
        color: #6d6d72;
      }
    }
    .warncell {
      min-height: 3.5rem;
      max-height: 3.5rem;
      border: none;
      background: #efeff4;
      text-align: center;
      span {
        text-align: center;
        color: #ff5306;
        font-size: small;
        font-weight: bold;
      }
    }

  }

  .mui-content {
    background: #f7f7fc;
    .marrow {
      background: #f7f7fc;
      .basicCell {
        background: white;
        height: 2.5rem;
        .bigSpan {
          position: absolute;
          font-size: medium;
          font-weight: 500;
        }
        .span_right {
          position: absolute;
          right: 2rem;
          input {
            width: 5rem;
            border: none;
            text-align: right;
            font-size: small;
          }
        }

        .span_small {
          font-weight: normal;
          font-size: small;
          color: #929292;

        }
        .span_xsmall {
          font-size: x-small;
          position: absolute;
          right: 1rem;
          top: 30%;
        }
        .bedspan_l {
          font-size: smaller;
          font-weight: bolder;
          color: #6d6d72;
          position: absolute;
          left: 10px;

        }
        .bedspan_m {
          font-size: 15px;
          font-weight: normal;
          color: #6d6d72;
          position: absolute;
          left: 40%;

        }
        .left_20 {
          position: relative;
          left: 0px
        }
        .bedspan_r {
          font-size: smaller;
          font-weight: bolder;
          color: #6d6d72;
          position: absolute;
          right: 10px;

        }
      }

      .centerCell {
        text-align: center;
      }

      .highlight {
        border: 1px solid #ff9c20;
      }

      .cirli {
        text-align: center;
        border-radius: 1.5rem;
        width: 90%;
        margin: 0.5rem 0 0.5rem 0;
        height: 90%;
        position: relative;
        left: 5%;
        border: none;
        box-shadow: 2px 2px 3px #6d6d72;
      }
      .nonebed {
        font-size: smaller;
        font-weight: bold;
        color: #8f8f94
      }

      .infraCell {
        .icon {
          font-size: 13px;
        }
        background: white;
        height: 2rem;
        .span_left {
          position: absolute;
          top: 20%;
          font-size: small;
          font-weight: 500;
          input {
            border: none;
          }
        }
        .span_medio {
          position: absolute;
          top: 20%;
          margin-left: 3rem;
          font-size: small;
          font-weight: bolder;
          input {
            border: none;
            width: 5rem;
            height: 1rem;
            font-size: x-small;
          }
        }
        .span_right {
          position: absolute;
          top: 20%;
          right: 1rem;
          font-size: small;
          color: #656565;
          span {
            width: 4rem;
            text-align: right;
          }

        }
        .span_circle {
          width: 1rem;
          height: 1rem;
          border-radius: 0.5rem;
        }

        .circle_true {
          border: none;
          background-color: #ff8514;
        }

        .circle_false {
          border: 2px solid darkgrey;
          background-color: white;
        }

        .span_width {
          width: 5rem;
          text-align: right;
        }
        .samll {
          font-size: small
        }
        .infra_check {
          width: 16px;
          height: 16px;
        }

      }

      .infraCell_big {
        width: 100%;
        height: 4rem;
        .p_strong {
          color: black;
          font-size: large;
          font-weight: bold;
        }

      }
      .infraCell_biger {
        width: 100%;
        height: 6rem;
        p {

          width: 100%;
          .span_right {
            position: relative;
            left: 60%;
          }
          .span_black {
            color: black;
          }
          .span_bold {
            font-weight: bold;
          }
          .span_large {
            font-size: larger;
          }
          .span_medium {
            font-size: medium;
          }
        }
      }
      .infraCell_boboder {
        border: none;
        border-top: none;
        border-bottom: none;
      }
      .groupCell {
        height: 2rem;
        font-size: larger;
        font-weight: bold;
        margin: 0;
        color: #929292;
        .small {
          font-size: x-small;
        }

      }
      .cell_big {
        height: 3rem;
      }
      .textcell {
        width: 90%;
        text-align: center;
        position: absolute;
        left: 5%;
        .bigspan {
          font-size: medium;
          font-weight: 500;
          margin: 1rem 0 1rem 0;
        }
        .smallspan {
          font-size: xx-small;
          color: #8f8f94;
          font-weight: bold;
        }
      }
      .small {
        font-size: medium;
      }
      .big {
        height: 3rem;
      }
    }
    .marrow {
      margin-bottom: 2rem;
    }
    .center {
      text-align: center;
    }
  }

  .main_body {
    width: 100%;
    background: white;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    .content {
      position: relative;
      left: 0;
      width: 100%;
      border-top: 1rem solid #EFEFF4;
      .bigcell {
        min-height: 3.5rem;
        max-height: 3.5rem;
        border-bottom: 1px solid lightgray;
        background: white;
        font-family: "Microsoft YaHei";
        text-align: left;
        .smallSpan {
          text-align: left;
          font-size: x-small;
          letter-spacing: 1px;
          margin-top: 5px;
        }
        .bigSpan {
          text-align: left;
          letter-spacing: 1px;
          font-weight: 500;
        }
        .rightSpan {
          float: right;
          font-size: 13px;
          position: relative;
          top: 10px;
        }
      }

    }
    .bk_content {
      position: relative;
      left: 0;
      top: 3rem;;
      width: 100%;
      border-top: 1rem solid #efeff4;
      height: 5rem;
      background: rgba(239, 239, 244, 0.22);
      span {
        font-weight: bold;
        font-size: smaller;
      }
      .orange {
        color: orange;
      }
      .spanCheck {
        width: 12px;
        height: 12px;
        border: 2px solid grey;
      }
    }

  }
  .title_type1 {
    position: absolute;
    left: 20px;
    top: 1rem;;
    width: 80%;
    font-size: larger;
  }
  .title_type2 {
    .title_span {
      position: relative;
      left: 30px;
    }
    position: absolute;
    left: 0;
    top: 12rem;;
    width: 100%;
    font-size: larger;
    overflow: hidden;
    .house_varity {
      margin-top: 20px;
      width: 100rem;
      background: white;
      min-height: 2.5rem;
      max-height: 2.5rem;
      input {
        border: none;
      }
    }
  }
  .content {
    position: absolute;
    left: 0;
    top: 3rem;;
    width: 100%;
    .mui-table-view-cell {

      min-height: 3.5rem;
      max-height: 3.5rem;
      font-family: "Microsoft YaHei";
      border-bottom: 1px solid lightgray;
      background: white;
      .small {
        font-size: small;
        letter-spacing: 1px;
        margin-top: 10px;
        font-weight: bold;
        color: #868080
      }
      .big {
        font-size: large;
        letter-spacing: 4px;
        font-weight: bolder
      }
      .cell-radio {
        width: 20px;
        height: 20px;
        border: 2px solid rgba(82, 72, 72, 0.97);
        border-radius: 10px;
        position: relative;
        top: 10px;
        float: right;

      }
    }
  }

  .main_map {
    width: 100%;
    background: whitesmoke;
    height: 13rem;
  }

  .pub_location {

    .pub_location_title {
      width: 80%;
      height: 1.5rem;
      margin: 5px 0 5px 20px;
    }
    .location_content {
      background-color: white;
      .mui-content {
        background-color: white;
        .mui-row {
          .mui-table-view-cell {
            min-height: 2.5rem;
            max-height: 2.5rem;
            font-family: "Microsoft YaHei" ! important;
            .location_input {
              border: none;
              font-weight: bolder;
              width: 80%;
            }
            .halfinput {
              width: 45%;
            }
            input::-webkit-input-placeholder {
              color: #ababab;
              opacity: 1;
            }
          }
        }
      }
    }
    .span_label {
      font-weight: bold;
      font-size: smaller;
    }
  }

  .addimg-big {
    width: 100%;
    background: whitesmoke;
    height: 13rem;
    text-align: center;

    .title {
      margin-top: 3rem;
      color: #929292;
    }
    .button_div {
      position: relative;
      color: #221d32;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      .border() {
        position: absolute;
        left: 0;
        content: '';
        width: 100%;
        height: 1px;
        transform: scaleY(.5);
      }
      &::before {
        .border();
        top: 0;
        border-top: 1px solid rgba(0, 0, 0, .3);
      }
      &::after {
        .border();
        bottom: 0;
        border-bottom: 1px solid rgba(0, 0, 0, .3);
      }

      span {
        font-size: small;
        height: 1.5rem;
      }
      input {
        border: none;
        font-size: small;
        font-weight: bold;
        width: 80%;
        height: 1.5rem;
      }
      .btn-group {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        button {
          flex-grow: 1;
          border: none;
          border-radius: 0;
          position: relative;
        }
      }
    }
    .addimg_shu {
      width: 100%;
      height: 100%;
      transition: 800ms;
    }

    .addimg_heng {
      max-width: 100%;
      max-height: 100%;
      transition: 800ms;
    }

  }

  .addimg-sma {
    width: 100%;
    height: auto;
    text-align: center;
    justify-content: center;
    margin-top: 4rem;

    .addimg_div {
      width: 3rem;
      height: 3rem;
      background: white;
      border: 1px solid #a2a2a8;
      margin: 0.5rem;
      border-radius: 2px;
      text-align: center;
      font-size: larger;
      float: left;
      .icon {
        color: #a2a2a8;
      }
      span {
        margin-top: 1rem;
      }
    }
    img {
      width: 3rem;
      height: 3rem;
      margin: 0.5rem 0.5rem 0 0.5rem;
      border-radius: 2px;
      border-radius: 3px;
    }

    .cover {
      color: #ffa115;
      font-size: small;
      font-weight: bold;

    }
    .active {
      border: 2px solid #ff9b11;
    }

  }

  .addimg-rule {
    float: none;
    text-align: center;
    margin-top: 2rem;
    margin-bottom: 2rem;
    .orange {
      color: orange;
      font-size: small;
      font-weight: bolder;
    }
    .nomal {
      font-weight: bold;;
      font-size: x-small;
      color: #8f8f94;
    }
  }

  .bounce_mask {
    background: white;
    width: 80%;
    height: 75%;
    position: fixed;
    top: 10%;
    left: 10%;
    border-radius: 20px;
    z-index: 110;
    overflow: hidden;
    box-shadow: 1px 1px 5px -1px rgba(0, 0, 0, .2);

    .mask_top {
      width: 100%;
      height: 85%;
      margin-top: 20px;
      overflow-y: scroll;
      &::-webkit-scrollbar {
        display: none;
      }

      h2 {
        font-size: larger;
        text-align: center;
      }
      .red {
        font-size: xx-small;
        color: red;
      }
      p {
        margin: 5px 20px 5px 20px;
        color: #4c4c51;
        font-size: small;
        font-weight: bold;
      }
    }
    .mask_bottom {
      width: 100%;
      height: 10%;
      position: absolute;
      bottom: 0;
      border-top: 1px solid orange;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      background: linear-gradient(to right, #ff5100, #ff8e00);
      border-radius: 0 0 20px 20px;

      span {
        text-align: center;
        color: white;
      }
    }

  }

  .mui-slider {
    .mui-slider-group {
      .mui-slider-item {
        .sliderBody {
          height: 15rem;
          width: 100%;
          text-align: center;
          .sliderTitle {
            margin: 2.5rem 0 1rem 0;
            font-size: x-large;
          }
          .sliderSmall {
            font-size: smaller;
            font-weight: bold;
            margin-bottom: 2rem;
            letter-spacing: 1px;
          }
          .sliderSmaller {
            font-size: smaller;
            color: #929292;
            font-weight: bold;
            letter-spacing: 2px;
          }
          .sliderpoint {
            span {
              width: 12px;
              height: 12px;
              background: grey;
              border-radius: 6px;
              margin: 2rem 1rem 0 1rem;
            }
            .orange {
              background: orange;
            }
            .toimgbtn {
              margin-top: 2rem;
              width: 3rem;
            }
          }
        }
      }
    }
  }
}

.fxj-header {
  a {
    .icon {
      margin-left: .5rem;
    }
  }
}

.fxj-title {
  line-height: 2rem;
}

.pub_main .mui-content .marrow .basicCell .span_right input {
  padding: 0;
}

.line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
  input {
    padding: 0;
    text-align: right;
    width: auto;
    max-width: 50vw;
    font-size: 14px;
  }

  span {
    white-space: nowrap;
    font-size: 14px;
    color: #656565;
  }
}

#ask-for {
  width: 100%;
  height: auto;
  font-size: 14px;
  border: none;
  background-color: #ededf5;
  padding: 5px;
}

#beizhu {
  min-height: 2rem;
  font-weight: normal;
  font-size: 14px;
  padding: 5px;
}

.mui-btn-warning {
  flex-grow: 1;
  border-radius: 0;
  border: none;
  box-shadow: none;
  min-height: 2rem;
}

#fuck-select {
  border: none;
  height: 100%;
  position: relative;
  padding: 10px 15px;
  display: flex;
  &:active {
    background: white;
    color: darkorange;
  }
  > span {
    padding: 0 2px;
  }
}

#addimg-sam {
  display: flex;
  flex-wrap: wrap;
}